<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业权限管理系统 - frozenSet 应用示例</title>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background-color: #1e88e5;
            color: white;
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fff;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #1e88e5;
        }

        .main-content {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 20px;
            margin-top: 20px;
        }

        .sidebar {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
        }

        .role-selector {
            margin-bottom: 20px;
        }

        .role-selector h3 {
            margin-bottom: 10px;
            color: #555;
        }

        .role-list {
            list-style: none;
        }

        .role-item {
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
            margin-bottom: 5px;
        }

        .role-item:hover {
            background-color: #f0f4f8;
        }

        .role-item.active {
            background-color: #e3f2fd;
            color: #1e88e5;
            font-weight: bold;
        }

        .content-area {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
        }

        .permission-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .permission-title {
            font-size: 20px;
            color: #333;
        }

        .permission-actions button {
            background-color: #1e88e5;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
            margin-left: 10px;
        }

        .permission-actions button:hover {
            background-color: #1976d2;
        }

        .permission-actions button:disabled {
            background-color: #b0bec5;
            cursor: not-allowed;
        }

        .permission-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .permission-card {
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 15px;
            transition: all 0.2s;
        }

        .permission-card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }

        .permission-card.selected {
            border-color: #1e88e5;
            background-color: #e3f2fd;
        }

        .permission-card h4 {
            margin-bottom: 10px;
            color: #333;
        }

        .permission-card p {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .permission-card .permission-code {
            font-family: monospace;
            background-color: #f5f5f5;
            padding: 3px 6px;
            border-radius: 3px;
            font-size: 12px;
            color: #555;
        }

        .logs-section {
            margin-top: 30px;
        }

        .logs-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .logs-title {
            font-size: 18px;
            color: #333;
        }

        .logs-container {
            background-color: #f5f5f5;
            border-radius: 6px;
            padding: 15px;
            max-height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 14px;
            line-height: 1.5;
        }

        .log-entry {
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px dashed #ddd;
        }

        .log-entry:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .log-time {
            color: #1e88e5;
            margin-right: 10px;
        }

        .log-message {
            color: #333;
        }

        .log-error {
            color: #e53935;
        }

        .log-success {
            color: #43a047;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background-color: white;
            border-radius: 8px;
            width: 500px;
            max-width: 90%;
            max-height: 500px;
            overflow-y: auto;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 18px;
            font-weight: bold;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #666;
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            text-align: right;
        }

        .modal-footer button {
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .btn-cancel {
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            color: #333;
            margin-right: 10px;
        }

        .btn-cancel:hover {
            background-color: #e0e0e0;
        }

        .btn-confirm {
            background-color: #1e88e5;
            border: none;
            color: white;
        }

        .btn-confirm:hover {
            background-color: #1976d2;
        }

        .code-block {
            background-color: #f5f5f5;
            border-radius: 6px;
            padding: 15px;
            margin: 15px 0;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-x: auto;
        }

        .highlight {
            background-color: #fff9c4;
            padding: 2px;
        }

        .tooltip {
            position: relative;
            display: inline-block;
            cursor: help;
        }

        .tooltip .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            pointer-events: none;
        }

        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">企业权限管理系统</div>
                <div class="user-info">
                    <div class="avatar">A</div>
                    <span>管理员</span>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="main-content">
            <div class="sidebar">
                <div class="role-selector">
                    <h3>角色选择</h3>
                    <ul class="role-list" id="roleList">
                        <li class="role-item active" data-role="admin">系统管理员</li>
                        <li class="role-item" data-role="manager">部门经理</li>
                        <li class="role-item" data-role="editor">内容编辑</li>
                        <li class="role-item" data-role="viewer">普通用户</li>
                    </ul>
                </div>
            </div>

            <div class="content-area">
                <div class="permission-header">
                    <h2 class="permission-title">权限管理</h2>
                    <div class="permission-actions">
                        <button id="showCodeBtn">查看实现代码</button>
                        <button id="tryModifyBtn">尝试修改权限</button>
                    </div>
                </div>

                <div class="permission-list" id="permissionList">
                    <!-- 权限卡片将通过 JavaScript 动态生成 -->
                </div>

                <div class="logs-section">
                    <div class="logs-header">
                        <h3 class="logs-title">操作日志</h3>
                    </div>
                    <div class="logs-container" id="logsContainer">
                        <!-- 日志条目将通过 JavaScript 动态生成 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 代码查看模态框 -->
    <div class="modal" id="codeModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">frozenSet 实现代码</h3>
                <button class="modal-close" id="closeCodeModal">&times;</button>
            </div>
            <div class="modal-body">
                <p>frozenSet 是一个不可变的 Set 集合，通过将修改方法设置为 undefined 来实现不可变性：</p>
                <pre class="code-block">
<code>const frozenSet = iterable => {
    const s = new Set(iterable);
    s.delete = undefined;
    s.add = undefined;
    s.clear = undefined;
    return s;
};</code>
</pre>
                <p>在权限管理系统中，我们使用 frozenSet 来确保权限集合一旦分配就不能被修改，提高系统安全性：</p>
                <pre class="code-block">
<code>// 为每个角色分配不可变的权限集合
const rolePermissions = {
    admin: frozenSet(['manage_users', 'manage_roles', 'view_reports', 'edit_content', 'delete_content', 'approve_content', 'manage_settings']),
    manager: frozenSet(['view_reports', 'edit_content', 'approve_content', 'manage_team']),
    editor: frozenSet(['edit_content', 'delete_content']),
    viewer: frozenSet(['view_content'])
};</code>
                </pre>
                <p>尝试修改这些权限集合将不会生效，从而保护系统安全：</p>
                <pre class="code-block">
<code>// 尝试修改权限（不会生效）
try {
    rolePermissions.editor.add('manage_users');
    console.log('添加权限成功'); // 不会执行到这里
} catch (e) {
    console.log('无法修改不可变权限集合');
}</code>
                </pre>
            </div>
            <div class="modal-footer">
                <button class="btn-confirm" id="confirmCodeModal">了解</button>
            </div>
        </div>
    </div>

    <!-- 尝试修改权限模态框 -->
    <div class="modal" id="modifyModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">尝试修改权限</h3>
                <button class="modal-close" id="closeModifyModal">&times;</button>
            </div>
            <div class="modal-body">
                <p>当前选择的角色: <strong id="currentRoleText">系统管理员</strong></p>
                <p>尝试为该角色添加新权限: <strong>manage_system</strong> (系统管理)</p>
                <p>操作结果将显示在下方:</p>
                <pre class="code-block">
                    <!-- 修改结果将在这里显示 -->
                     <code id="modifyResult"></code>
                </pre>
            </div>
            <div class="modal-footer">
                <button class="btn-cancel" id="cancelModifyModal">取消</button>
                <button class="btn-confirm" id="confirmModifyModal">尝试修改</button>
            </div>
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>
        hljs.highlightAll();
        // frozenSet 实现 - 创建不可变的 Set 集合
        const frozenSet = iterable => {
            const s = new Set(iterable);
            s.delete = undefined;
            s.add = undefined;
            s.clear = undefined;
            return s;
        };

        // 权限数据
        const permissionsData = {
            manage_users: { name: '用户管理', description: '创建、编辑和删除系统用户' },
            manage_roles: { name: '角色管理', description: '创建和管理用户角色' },
            view_reports: { name: '查看报表', description: '访问系统分析和报表' },
            edit_content: { name: '编辑内容', description: '创建和编辑系统内容' },
            delete_content: { name: '删除内容', description: '删除系统中的内容' },
            approve_content: { name: '内容审批', description: '审批其他用户创建的内容' },
            manage_settings: { name: '系统设置', description: '修改系统配置和设置' },
            manage_team: { name: '团队管理', description: '管理团队成员和分配任务' },
            view_content: { name: '查看内容', description: '查看系统内容但不能修改' }
        };

        // 为每个角色分配不可变的权限集合
        const rolePermissions = {
            admin: frozenSet(['manage_users', 'manage_roles', 'view_reports', 'edit_content', 'delete_content', 'approve_content', 'manage_settings']),
            manager: frozenSet(['view_reports', 'edit_content', 'approve_content', 'manage_team']),
            editor: frozenSet(['edit_content', 'delete_content']),
            viewer: frozenSet(['view_content'])
        };

        // 角色名称映射
        const roleNames = {
            admin: '系统管理员',
            manager: '部门经理',
            editor: '内容编辑',
            viewer: '普通用户'
        };

        // 当前选择的角色
        let currentRole = 'admin';

        // DOM 元素
        const roleList = document.getElementById('roleList');
        const permissionList = document.getElementById('permissionList');
        const logsContainer = document.getElementById('logsContainer');
        const showCodeBtn = document.getElementById('showCodeBtn');
        const tryModifyBtn = document.getElementById('tryModifyBtn');
        const codeModal = document.getElementById('codeModal');
        const closeCodeModal = document.getElementById('closeCodeModal');
        const confirmCodeModal = document.getElementById('confirmCodeModal');
        const modifyModal = document.getElementById('modifyModal');
        const closeModifyModal = document.getElementById('closeModifyModal');
        const cancelModifyModal = document.getElementById('cancelModifyModal');
        const confirmModifyModal = document.getElementById('confirmModifyModal');
        const currentRoleText = document.getElementById('currentRoleText');
        const modifyResult = document.getElementById('modifyResult');

        // 添加日志条目
        function addLogEntry(message, type = 'info') {
            const logEntry = document.createElement('div');
            logEntry.className = 'log-entry';

            const now = new Date();
            const timeStr = now.toLocaleTimeString();

            const logTime = document.createElement('span');
            logTime.className = 'log-time';
            logTime.textContent = `[${timeStr}]`;

            const logMessage = document.createElement('span');
            logMessage.className = `log-message ${type === 'error' ? 'log-error' : type === 'success' ? 'log-success' : ''}`;
            logMessage.textContent = message;

            logEntry.appendChild(logTime);
            logEntry.appendChild(logMessage);

            logsContainer.appendChild(logEntry);
            logsContainer.scrollTop = logsContainer.scrollHeight;
        }

        // 渲染权限列表
        function renderPermissions() {
            permissionList.innerHTML = '';
            const permissions = rolePermissions[currentRole];

            // 添加日志
            addLogEntry(`加载 ${roleNames[currentRole]} 的权限列表`, 'success');

            // 遍历所有权限数据
            Object.keys(permissionsData).forEach(permCode => {
                const permData = permissionsData[permCode];
                const hasPermission = permissions.has(permCode);

                const card = document.createElement('div');
                card.className = `permission-card ${hasPermission ? 'selected' : ''}`;
                card.dataset.permission = permCode;

                const title = document.createElement('h4');
                title.textContent = permData.name;

                const description = document.createElement('p');
                description.textContent = permData.description;

                const code = document.createElement('div');
                code.className = 'permission-code';
                code.textContent = permCode;

                card.appendChild(title);
                card.appendChild(description);
                card.appendChild(code);

                permissionList.appendChild(card);
            });
        }

        // 初始化角色选择器事件
        function initRoleSelector() {
            const roleItems = roleList.querySelectorAll('.role-item');

            roleItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有活动状态
                    roleItems.forEach(i => i.classList.remove('active'));
                    // 添加当前项的活动状态
                    item.classList.add('active');

                    // 更新当前角色
                    currentRole = item.dataset.role;
                    // 重新渲染权限列表
                    renderPermissions();
                });
            });
        }

        // 初始化模态框事件
        function initModals() {
            // 代码查看模态框
            showCodeBtn.addEventListener('click', () => {
                codeModal.classList.add('active');
                addLogEntry('查看 frozenSet 实现代码');
            });

            closeCodeModal.addEventListener('click', () => {
                codeModal.classList.remove('active');
            });

            confirmCodeModal.addEventListener('click', () => {
                codeModal.classList.remove('active');
            });

            // 尝试修改权限模态框
            tryModifyBtn.addEventListener('click', () => {
                modifyModal.classList.add('active');
                currentRoleText.textContent = roleNames[currentRole];
                modifyResult.textContent = '点击"尝试修改"按钮查看结果';
                addLogEntry(`尝试修改 ${roleNames[currentRole]} 的权限`);
            });

            closeModifyModal.addEventListener('click', () => {
                modifyModal.classList.remove('active');
            });

            cancelModifyModal.addEventListener('click', () => {
                modifyModal.classList.remove('active');
            });

            confirmModifyModal.addEventListener('click', () => {
                // 尝试修改权限
                try {
                    const permissions = rolePermissions[currentRole];
                    permissions.add('manage_system');
                    modifyResult.textContent = '修改成功！已添加 manage_system 权限。';
                    addLogEntry('成功添加权限 manage_system', 'success');
                } catch (e) {
                    modifyResult.textContent = '修改失败！frozenSet 是不可变的，无法添加新权限。\n\n错误详情: ' +
                        (e.message || '尝试调用 undefined 方法');
                    addLogEntry('无法修改不可变权限集合', 'error');
                }
            });
        }

        // 页面加载时初始化
        window.addEventListener('DOMContentLoaded', () => {
            // 初始化角色选择器
            initRoleSelector();
            // 初始化模态框
            initModals();
            // 渲染初始权限列表
            renderPermissions();

            // 添加初始日志
            addLogEntry('权限管理系统初始化完成', 'success');
            addLogEntry('使用 frozenSet 确保权限集合不可变');
        });
    </script>
</body>

</html>
</body>

</html>